<template>
  <div class="app">
    <div class="box">
      <div class="title">vue动画响应式练习</div>
      <div class="immg">
        <div class="img" v-for="(item, index) in list" :key="index" @click="open(item)">
          <img :src="require(`../assets/img/${item.imgUrl}`)" alt="" />
          <span>{{item.caption}}</span>
        </div>
      </div>
    </div>
    <!-- 动画过渡效果 -->
    <transition name="fade">
      <!-- 子组件调用父级属性和方法 -->
      <tran :imgsour="curr" :close="closeBox" v-if="lightBox"></tran>
    </transition>
  </div>
</template>

<script>
import tran from "../components/tran.vue"
export default {
  name: "",
  components: {tran},
  data() {
    return {
      list: [
        {
          id: 1,
          caption: "测试1",
          imgUrl: "1.jpeg",
        },
        {
          id: 2,
          caption: "测试2",
          imgUrl: "2.jpg",
        },
        {
          id: 3,
          caption: "测试3",
          imgUrl: "3.jpeg",
        },
        {
          id: 4,
          caption: "测试4",
          imgUrl: "4.jpeg",
        },
        {
          id: 5,
          caption: "测试5",
          imgUrl: "5.jpg",
        },
        {
          id: 9,
          caption: "测试6",
          imgUrl: "6.jpg",
        },
      ],
      curr:'',
      lightBox: false
    };
  },
  created() {},
  mounted() {},
  methods: {
    open(i){
      // console.log(i);
      this.curr=i;
      this.lightBox=!this.lightBox
    },
    closeBox(){
      this.lightBox=false
    }
  },
};
</script>
<style scoped lang='scss'>
.app {
  width: 100vh;
  min-height: 100vh;
}
.box {
  width: 96vw;
  margin: auto;
}

.title {
  font-size: 2.4rem;
  text-align: center;
  margin: 2rem auto;
}
.immg {
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.img {
  width: 20%;
  margin: 20px;
  padding: 10px;
  background-color: white;
  border-radius: 8px;
}
img {
  width: 100%;
}
</style>
